<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
  <div id="app">
    <!-- 
      type 表示alert样式

     -->
    <bt-alert type="danger" title="Error!" show-icon>危险内容</bt-alert>
    <bt-alert type="success" closable >成功内容</bt-alert>
    <!-- <bt-alert></bt-alert> -->
    <bt-alert type="warning" center>警告内容</bt-alert>
    <bt-alert type="info" center>信息</bt-alert>
    <bt-alert>
      <h3 slot="title">标题</h3>
      内容
    </bt-alert>
  </div>
  <script src="./vue.js"></script>
  <script>
    /* 
      属性
        type String  success  success, info, danger, warning  控制样式
        title  String  /  字符串  最前面的加粗标题
        description  String  /  字符串  描述  
        center  Boolean  false  布尔值  是否居中
        showIcon  Boolean  false   布尔值  是否显示图标
        closable  Boolean  false   布尔值  是否显示关闭

      事件
        close 在关闭警告框时触发对应的事件
    
    */
    const btAlert = {
      template: `
        <div 
          class="alert"
          :class="[
            'alert-' + type,
            center ? 'text-center' : ''
          ]" 
          v-if="visible" 
        >
          <button 
            type="button" 
            class="close" 
            v-if="closable"
            @click="close"
          ><span>&times;</span></button>
          
          <span class="glyphicon glyphicon-ok text-success" v-if="type==='success' && showIcon"></span>
          
          <span class="glyphicon glyphicon-cutlery text-danger" v-if="type==='danger' && showIcon"></span>
          
          <span class="glyphicon glyphicon-subtitles text-warning" v-if="type==='warning' && showIcon"></span>
          
          <span class="glyphicon glyphicon-copy text-info" v-if="type==='info' && showIcon"></span>
         
          <slot name="title">
            <strong v-if="title">{{title}}</strong>
          </slot>
          <slot>
            {{description}}
          </slot>
        </div>
      `,
      data () {
        return {
          visible: true
        }
      },
      props: {
        type: {
          type: String,
          default: 'success'
        },
        title: String,
        description: String,
        center: Boolean,
        showIcon: Boolean,
        closable: Boolean
      },
      methods: {
        close () {
          this.visible = false
          this.$emit('close')
        }
      }
    }

    Vue.component('btAlert', btAlert)

    const app = new Vue({
      el: '#app',
      methods: {
        fn () {
          alert('已关闭')
        }
      }
    })
  </script>
</body>
</html>